<template>
    <div class="page-container">
        <!-- Header -->
        <!-- <div class="page-header">
            <div class="header-left">
                <div>
                    <h1 class="page-title">数据分析</h1>
                    <p class="page-description">
                        多维度统计与可视化分析，支持取样、对比、趋势及3D多维展示
                    </p>
                </div>
            </div>
        </div> -->

        <!-- Tab选项卡 -->
        <div class="nav-card">
            <el-tabs v-model="activeTab" class="analysis-tabs">
                <el-tab-pane label="取样分析" name="sampling">
                    <SamplingAnalysis />
                </el-tab-pane>

                <el-tab-pane label="对比分析" name="comparison">
                    <ComparisonAnalysis />
                </el-tab-pane>

                <el-tab-pane label="趋势分析" name="trend">
                    <TrendAnalysis />
                </el-tab-pane>

                <el-tab-pane label="多维分析 (3D)" name="multiDimensional">
                    <MultiDimensionalAnalysis />
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 使用说明 -->
        <div class="notice-card">
            <div class="notice-title"><i class="el-icon-info"></i> 使用注意事项</div>
            <ul class="notice-list">
                <li>
                    所有分析默认只统计状态为 <code class="code-tag">4</code>（已归档）的企业报告。
                </li>
                <li>
                    趋势分析：
                    <span class="formula">岗位变化 = 调查期岗位数 − 建档期岗位数</span>；
                    <span class="formula"
                        >变化占比 = (调查期岗位数 − 建档期岗位数) / 建档期岗位数 × 100%</span
                    >。
                </li>
                <li>
                    对比分析：前端分别获取两个调查期数据并合并，
                    <span class="formula">变化 = 变化占比(调查期 2) − 变化占比(调查期 1)</span>。
                    正值用红色表示失业率上升，负值用绿色表示下降。
                </li>
                <li>
                    选择“全省汇总”时会返回单条汇总记录，其它维度按照一级分类展示（地区 16 个、性质 8
                    个、行业 20 个）。
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import SamplingAnalysis from './dataAnalysis/SamplingAnalysis.vue';
import ComparisonAnalysis from './dataAnalysis/ComparisonAnalysis.vue';
import TrendAnalysis from './dataAnalysis/TrendAnalysis.vue';
import MultiDimensionalAnalysis from './dataAnalysis/MultiDimensionalAnalysis.vue';

/**
 * 数据分析主页面
 * @description 提供三大分析功能的Tab导航
 */

// 当前激活的Tab
const activeTab = ref('sampling');
</script>

<style scoped lang="scss">
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 24px 40px;
    box-sizing: border-box;
    // background-color: #f8fafc;
    color: #1e293b;
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
}

/* Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 40px;
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    border-radius: 24px;
    color: white;
    box-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.3);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.page-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    color: white;
}

.page-description {
    font-size: 15px;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
    color: white;
}

/* Tabs Container */
.nav-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
    border: 1px solid rgba(241, 245, 249, 1);
}

.analysis-tabs {
    :deep(.el-tabs__header) {
        margin-bottom: 24px;
    }

    :deep(.el-tabs__nav-wrap::after) {
        height: 1px;
        background-color: #f1f5f9;
    }

    :deep(.el-tabs__item) {
        font-size: 15px;
        font-weight: 500;
        color: #64748b;
        padding: 0 24px;

        &.is-active {
            color: #4f46e5;
            font-weight: 700;
        }

        &:hover {
            color: #4338ca;
        }
    }

    :deep(.el-tabs__active-bar) {
        background-color: #4f46e5;
        height: 3px;
        border-radius: 3px;
    }
}

/* Notice Card */
.notice-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    .notice-title {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .notice-list {
        margin: 0;
        padding-left: 20px;
        color: #475569;
        font-size: 14px;
        line-height: 1.8;

        li {
            margin-bottom: 8px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .formula {
            display: inline-block;
            margin: 0 4px;
            padding: 2px 8px;
            background: #eff6ff;
            border-radius: 6px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            color: #2563eb;
            border: 1px solid #dbeafe;
        }

        .code-tag {
            padding: 2px 6px;
            background: #f1f5f9;
            border-radius: 4px;
            font-family: monospace;
            font-size: 13px;
            color: #0f172a;
            border: 1px solid #e2e8f0;
        }
    }
}
</style>
